<template>
	<view style="background-color: #FFFFFF;height: 1400rpx;">
		<view style="width: 100%;height: 100rpx;">

		</view>
		<view class="phonePlus">
			<text>+86<uni-icons type="bottom" size="18"></uni-icons></text>
			<input type="number" placeholder="请输入用户新号码" v-model="fetchPhone" maxlength="11" />
		</view>
		<!-- 获取验证码 -->
		<view class="auth">
			<input placeholder="请输入验证码" style="width: 100%;" type="number" v-model="phoneCode" maxlength="6" />
			<view class="auth_btn" @click="getyzm">{{ captchaTime <= 0 ? '获取验证码' : captchaTime + 's' }}</view>
		</view>
		<!-- 点击确定取消 -->
		<view class="cancelSure">
			<view @click="cancelChange">
				<text>取消</text>
			</view>
			<view @click="sureAlteration" :style="{color:activeStyle.color,background:activeStyle.background}">
				<text>确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				checkCode: '',
				appId: '',
				androidIos: '',
				fetchPhone: '', //需要更改单手机号
				phone: '',
				checkValue: false,
				captchaTime: 0,
				phoneCode: '', //验证码
				code: '',
				activeStyle: {
					color: '#FFFFFF',
					background: '#cccccc'
				}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		watch: {
			// 监听输入手机时登录按钮变色
			fetchPhone(nawValue, aldValue) {
				if (this.fetchPhone != '') {
					this.activeStyle.color = '#fff';
					this.activeStyle.background = '#9e001a';
				} else {
					this.activeStyle.color = '#FFFFFF';
					this.activeStyle.background = '#cccccc';
				}
			}
		},
		//第一次加载
		onShow(e) {
			this.phone = this.userInfo.phone || '';
		},
		onLoad(options) {
			console.log(options, '505050550055050');
			this.checkCode = options.checkCode
			this.androidIos = getApp().globalData.androidIos
		},
		methods: {
			...mapMutations(['setUserInfo']),
			// 获取验证码
			getyzm() {
				var regExp = new RegExp('^1[3578]\\d{9}$');
				if (!regExp.test(this.fetchPhone)) {
					uni.showToast({
						title: '请输入或检查手机号格式',
						icon: 'none'
					});
					return;
				}
				let data = {
					appId: this.androidIos,
					phone: this.fetchPhone,
				}

				if (this.captchaTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: 'none'
					});
					return;
				} else {
					this.$httpNew.get('authApi/auth/GetVerificationCodeByPhone', data).then(
						res => {
							console.log('chenzheng123', res);
							this.captchaTime = 30;
							let timer = setInterval(() => {
								this.captchaTime--;
								if (this.captchaTime < 1) {
									clearInterval(timer);
									this.captchaTime = 0;
								}
							}, 1000);
						});
				}
			},
			// 点击确定按钮,成功后返回个人信息页面
			sureAlteration() {
				if (this.phoneCode == this.phoneCode) {
					let data = {
						appId: this.androidIos,
						phone: this.fetchPhone,
						code: this.phoneCode,
						checkCode: this.checkCode
					};
					if (this.phoneCode == '' || this.fetchPhone == '') {
						uni.showToast({
							title: '请填写手机号或验证码',
							icon: 'none'
						});
						return;
					}
					if (this.phone == this.fetchPhone) {
						uni.showToast({
							title: '用户原手机号不能用来修改',
							icon: 'none'
						});
						return;
					}


					this.$httpNew.post('authApi/user/updateUserPhone', data).then(res => {
						console.log(res + '按个人我国j');
						this.setUserInfo(res);
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						});
						this.fetchPhone = '';
						uni.navigateBack({
							delta:2
						})
					});

				} else {
					uni.showToast({
						title: '验证码错误',
						icon: 'none'
					});
				}
			},
			// 点击取消并返回到上一页，清空输入的内容
			cancelChange() {
				this.fetchPhone = '';
				// this.authCode='';//清空输入的验证码   备用
				uni.navigateBack({
					// 返回上一级
					delta: 1
				});
			}
		}
	};
</script>

<style scoped>
	.uni-page-wrapper {
		background-color: #FFFFFF;
	}

	.phoneText {
		margin-top: 20rpx;
		width: 90%;
		margin: auto;
		display: flex;
		flex-direction: column;
	}

	.countryPhone {
		/* margin-top: 40rpx; */
		/* position: relative;
		top: 40rpx; */
		width: 90%;
		height: 67rpx;
		margin: auto;
		display: flex;
		align-items: center; //上下居中
		justify-content: space-between;
		/* background-color: #04be02; */
	}

	.countryPhone image {
		width: 35rpx;
		height: 35rpx;
	}

	.countryRegion {
		width: 280rpx;
		display: flex;
		justify-content: space-between;
	}

	.phonePlus {
		width: 90%;
		margin: auto;
		height: 76rpx;
		border-bottom: 1px solid #F3F3F3;
		border-top: 1px solid #F3F3F3;
		/* background-color: aquamarine; */
		display: flex;
	}

	.phonePlus text {
		position: relative;
		top: 10rpx;
		width: 120rpx;
		height: 56rpx;
		border-right: 1px solid #F3F3F3;
		text-align: left;
		line-height: 56rpx;
	}

	.phonePlus input {
		width: 100%;
		height: 100%;
		/* 输入框默认字体向右移动 */
		text-indent: 20rpx;
	}

	/* 获取验证码 */
	.auth {
		margin: auto;
		border-bottom: 1rpx solid #e0e0e0;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
	}

	.auth .auth_btn {
		color: #FFFFFF;
		background-color: #B4001E;
		font-size: 18rpx;
		border: solid 1rpx #adadad;
		border-radius: 40rpx;
		width: 180rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
	}

	/* 点击"获取验证码",改变背景颜色和字体颜色 */
	.auth_btn:active {
		background-color: #B4001E;
		color: #FFFFFF;
	}

	/* 点击取消确定 */
	.cancelSure {
		margin-top: 300rpx;
		display: flex;
		justify-content: space-around;
	}

	.cancelSure>view {
		width: 330rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 82rpx;
		text-align: center;
		background-color: #ffffff;
		border: 1px solid #B0B0B0;
	}

	.cancelSure>view:nth-child(2) {
		color: #ffffff;
	}

	.cancelSure>view:nth-child(2):active {
		background-color: #9e001a;
	}
</style>
